<template>
    <div class="" >
        <h1 style="justify-content: center; display: flex; text-align: center;">用户登录</h1>
        <el-container style="display: flex; justify-content: center; align-items: center;">
            <el-form 
            style="width: 35%; 
            justify-content: center; 
            border: 1.5px solid #ccc;
            border-radius: 5px; 
            padding: 20px;" 
            :model="form" 
            :rules="rules"
            ref="loginForm">
                <!-- 第一行：登录名称 -->
                <el-form-item prop="name" label="登录名称" label-width="100px">
                    <el-input v-model="form.name" placeholder="请输入登录名称"/>
                </el-form-item>
                <!-- 第二行：登录方式 -->
                <el-form-item prop="charType" label="登录方式" label-width="100px">
                    <el-input v-model="form.charType" placeholder="请输入登录方式"/>
                </el-form-item>
                <!-- 登录按钮 -->
                <el-form-item style="float: right;">
                <el-button
                    @click="vaildForm()"
                    style="margin-left: 0; margin-top: 5px"
                    type="primary"
                >登录</el-button>
                <!-- 下面这些都可以实现跳转路由并传值 -->
                <!-- <router-link to="/main">登录</router-link><br/>-->
                <!--// 带参数的路由跳转，在跳转过去的页面上可以通过 this.$route.query 获取参数-->
                <!-- <router-link :to="{ 
                    path: '/main',
                    query: {
                        name: form.name,
                        charType: form.charType
                    }
                     }">登录</router-link><br/> -->
                <!--// 带参数的路由跳转，在跳转过去的页面上可以通过 this.$route.params 获取参数-->
                <!-- <router-link :to="{     
                name: 'main',
                params: {
                        name: form.name,
                        charType: form.charType
                        }
                }">登录</router-link><br/> -->
                <el-button
                    @click="handleRegister()"
                    style="margin-left: 15px; margin-top: 5px"
                    type="success"
                >注册</el-button>
                </el-form-item>
            </el-form>
        </el-container>
    </div>
</template>
<script>
export default {
    name: 'LoginPage',
    data () {
        return {
            form: {
                name: '',
                charType: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入登录名', trigger: 'blur' },
                ],
                charType: [
                    { required: true, message: '请输入登录方法', trigger: 'blur' },
                ],
            }
        };
    },
    mounted: function () {
      // mounted：组件被挂载的时候调用
    
    },
    methods: {
        Login() {
            console.log('login', this.form);
            const params = new URLSearchParams();
            params.append('name', this.form.name);
            params.append('charType', this.form.charType);
            this.$axios.post('http://127.0.0.1:8082/pojoTest/login', params, {
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).then(res => {
                console.log("res: " + res.data);
                if (res.data.code === 1) {
                    this.$message.success('登录成功');
                    this.$router.push({
                        path: '/main',
                        query: {
                            name: this.form.name,
                            charType: this.form.charType
                        }
                    });
                } else {
                    this.$message.error('登录失败，请检查登录信息！');
                }   
            }).catch(err => {
                console.log(err);
            });
            // 跳转到主页并传参 两个方法都可以实现
            // this.$router.push({
            //     path: '/main',
            //     query: {
            //         name: this.form.name,
            //         charType: this.form.charType
            //     }
            // });
            // this.$router.push({
            //     name: 'main',
            //     params: {
            //         name: this.form.name,
            //         charType: this.form.charType
            //     }
            // });
        },
        handleRegister() {
            console.log('register');
        },

        vaildForm() {
            // 表单验证
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.submitForm();
                } else {
                    alert('请检查输入项');
                    return false;
                }
            });
        },
        submitForm() {
            console.log('submitForm');
            this.Login();
        },
    }
};
</script>
<style scoped>
    
</style>